<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Projects',
  data() {
    return {
      projectsData: [
        {
          name: '',
          imagePath: require('@/assets/RIP.jpg'),
          info: ''
        },
        {
          name: '',
          imagePath: require('@/assets/RIP.jpg'),
          info: ''
        }
      ]
    }
  },
}
</script>

<template>
  <el-row>
    <el-col v-for="a in projectsData" :key="a" :span="8" :value="a" :offset="1">
      <el-card :body-style="{padding : '0px'}">
        <img :src="a.imagePath" class="image" alt="{{a.name}}"/>
        <div style="padding: 14px">
          <span>{{ a.name }}</span>
          <div class="bottom">

          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped>

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.image {
  width: 100%;
  display: block;
}
</style>